<template>
  <div class="ansible-audit-container">

    <!-- 星空背景 -->
    <div class="starry-background">
      <div class="stars"></div>
      <div class="stars2"></div>
      <div class="stars3"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="audit-content">
      <!-- 页面标题 -->
      <div class="page-header glass-effect">
        <div class="header-content">
          <div class="title-section">
            <h1 class="page-title">
              <i class="fa fa-server"></i>
              Ansible Inventory管理
            </h1>
            <p class="page-subtitle">管理主机清单和组织结构</p>
          </div>
          <div class="stats-section">
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_hosts || 0 }}</div>
              <div class="stat-label">主机总数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.total_groups || 0 }}</div>
              <div class="stat-label">组总数</div>
            </div>
            <div class="stat-card glass-effect">
              <div class="stat-number">{{ statistics.online_rate || 0 }}%</div>
              <div class="stat-label">在线率</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="search-filters glass-effect">
        <el-form inline class="search-form">
          <el-form-item>
            <el-button type="primary" @click="refreshInventory" class="glass-button refresh-button" :loading="loading">
              <i class="fa fa-refresh"></i>
              刷新Inventory
            </el-button>
            <el-button @click="syncHosts" class="glass-button sync-button" :loading="syncing">
              <i class="fa fa-sync"></i>
              从CMDB同步
            </el-button>
            <el-button @click="showCreateInventory" class="glass-button add-button">
              <i class="fa fa-plus"></i>
              创建Inventory
            </el-button>
            <el-button @click="showImportDialogFunc" class="glass-button import-button">
              <i class="fa fa-upload"></i>
              批量导入
            </el-button>
            <el-button @click="exportInventory" class="glass-button export-button">
              <i class="fa fa-download"></i>
              导出
            </el-button>
            <el-button @click="showSmartExport" class="glass-button smart-button">
              <i class="fa fa-magic"></i>
              智能同步
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- Inventory列表 -->
      <div class="audit-table-section glass-effect">
        <div class="section-title">
          <i class="fa fa-list"></i>
          Inventory列表
        </div>

        <el-table
          :data="inventories"
          style="width: 100%"
          v-loading="loading"
          @row-click="viewInventoryDetail"
          row-class-name="audit-row"
          class="audit-table"
        >
          <el-table-column prop="name" label="Inventory名称" min-width="200">
            <template #default="scope">
              <div class="config-name">
                <i class="fa fa-list-alt"></i>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="config_name" label="所属配置" width="150" />

          <el-table-column prop="hosts_count" label="主机数量" width="100">
            <template #default="scope">
              <el-tag type="info" size="small">
                {{ scope.row.hosts_count || 0 }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="groups_count" label="组数量" width="100">
            <template #default="scope">
              <el-tag type="warning" size="small">
                {{ scope.row.groups_count || 0 }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="is_active" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.is_active ? 'success' : 'danger'" size="small">
                {{ scope.row.is_active ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="last_sync_time" label="最后同步" width="160">
            <template #default="scope">
              {{ formatTime(scope.row.last_sync_time) }}
            </template>
          </el-table-column>

          <el-table-column prop="created_at" label="创建时间" width="160">
            <template #default="scope">
              {{ formatTime(scope.row.created_at) }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="350" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button size="small" @click.stop="editInventory(scope.row)" class="action-glass-button edit-action">
                  <i class="fa fa-edit"></i>
                  编辑
                </el-button>
                <el-button size="small" @click.stop="parseInventory(scope.row)" class="action-glass-button parse-action">
                  <i class="fa fa-cogs"></i>
                  解析
                </el-button>
                <el-button size="small" @click.stop="exportToFile(scope.row)" class="action-glass-button export-action">
                  <i class="fa fa-file-o"></i>
                  导出
                </el-button>
                <el-button
                  size="small"
                  @click.stop="deleteInventory(scope.row)"
                  class="action-glass-button danger"
                >
                  <i class="fa fa-trash"></i>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <!-- Inventory详情对话框 -->
      <el-dialog
        v-model="showInventoryDetail"
        title="Inventory详情"
        width="800px"
        :modal="true"
        :close-on-click-modal="false"
        custom-class="glass-dialog"
      >
        <div v-if="selectedInventory" class="inventory-detail">
          <div class="detail-section">
            <h3 class="detail-title">
              <i class="fa fa-info-circle"></i>
              基本信息
            </h3>
            <div class="detail-grid">
              <div class="detail-item">
                <label>名称:</label>
                <span>{{ selectedInventory.name }}</span>
              </div>
              <div class="detail-item">
                <label>所属配置:</label>
                <span>{{ selectedInventory.config_name }}</span>
              </div>
              <div class="detail-item">
                <label>主机数量:</label>
                <span>{{ selectedInventory.hosts_count }}</span>
              </div>
              <div class="detail-item">
                <label>组数量:</label>
                <span>{{ selectedInventory.groups_count }}</span>
              </div>
              <div class="detail-item">
                <label>状态:</label>
                <el-tag :type="selectedInventory.is_active ? 'success' : 'danger'" size="small">
                  {{ selectedInventory.is_active ? '活跃' : '非活跃' }}
                </el-tag>
              </div>
              <div class="detail-item">
                <label>最后同步:</label>
                <span>{{ formatTime(selectedInventory.last_sync_time) }}</span>
              </div>
              <div class="detail-item">
                <label>创建时间:</label>
                <span>{{ formatTime(selectedInventory.created_at) }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h3 class="detail-title">
              <i class="fa fa-file-code-o"></i>
              Inventory内容
            </h3>
            <div class="inventory-content">
              <pre>{{ selectedInventory.content || '暂无内容' }}</pre>
            </div>
          </div>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showInventoryDetail = false" class="action-glass-button">
              <i class="fa fa-times"></i>
              关闭
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 创建Inventory对话框 -->
      <el-dialog
        v-model="showCreateDialog"
        :title="editingInventoryId ? '编辑Inventory' : '创建Inventory'"
        :fullscreen="true"
        :modal="true"
        :close-on-click-modal="false"
        custom-class="glass-dialog inventory-create-dialog"
        :z-index="3000"
        :append-to-body="true"
        :destroy-on-close="true"
      >
        <el-form :model="createForm" label-width="100px" class="create-form">
          <el-form-item label="名称" required>
            <el-input
              v-model="createForm.name"
              placeholder="请输入Inventory名称"
              class="glass-input"
            />
          </el-form-item>

          <el-form-item label="配置" required>
            <el-select
              v-model="createForm.config_id"
              placeholder="请选择Ansible配置"
              class="glass-select"
              @click="handleSelectClick"
              @visible-change="handleVisibleChange"
              @focus="handleSelectFocus"
              clearable
              filterable
              :disabled="ansibleConfigs.length === 0"
              popper-class="custom-select-dropdown"
            >
              <el-option
                v-for="config in ansibleConfigs"
                :key="config.id"
                :label="config.name"
                :value="config.id"
              />
            </el-select>

          </el-form-item>

          <el-form-item label="内容" required>
            <div class="editor-container">
              <div ref="monacoEditor" class="monaco-editor"></div>
            </div>
          </el-form-item>

          <el-form-item label="描述">
            <el-input
              v-model="createForm.description"
              placeholder="请输入描述信息"
              class="glass-input"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showCreateDialog = false" class="action-glass-button">
              <i class="fa fa-times"></i>
              取消
            </el-button>
            <el-button @click="createInventory" class="action-glass-button create-btn" :loading="creating">
              <i :class="editingInventoryId ? 'fa fa-save' : 'fa fa-plus'"></i>
              {{ editingInventoryId ? '保存' : '创建' }}
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 批量导入对话框 -->
      <el-dialog
        v-model="showImportDialog"
        title="批量导入Inventory"
        width="800px"
        :modal="true"
        :close-on-click-modal="false"
        custom-class="glass-dialog"
      >
        <div class="import-options">
          <el-radio-group v-model="importType" class="import-type-group">
            <el-radio value="excel" class="import-radio">
              <i class="fa fa-file-excel-o"></i>
              Excel文件导入
            </el-radio>
            <el-radio value="file" class="import-radio">
              <i class="fa fa-file-text-o"></i>
              Inventory文件导入
            </el-radio>
            <el-radio value="config" class="import-radio">
              <i class="fa fa-server"></i>
              从配置文件导入
            </el-radio>
          </el-radio-group>

          <!-- Excel导入 -->
          <div v-if="importType === 'excel'" class="import-section">
            <div class="section-header">
              <h4>Excel文件导入</h4>
              <el-button @click="downloadTemplate" size="small" class="action-glass-button">
                <i class="fa fa-download"></i>
                下载模板
              </el-button>
            </div>
            <el-upload
              ref="excelUpload"
              :auto-upload="false"
              :show-file-list="true"
              accept=".xlsx,.xls"
              class="upload-area"
              :on-change="handleExcelFileChange"
              :on-remove="handleFileRemove"
            >
              <el-button class="upload-button">
                <i class="fa fa-upload"></i>
                选择Excel文件
              </el-button>
              <template #tip>
                <div class="upload-tip">支持.xlsx和.xls格式，请先下载模板查看格式要求</div>
              </template>
            </el-upload>
          </div>

          <!-- 文件导入 -->
          <div v-if="importType === 'file'" class="import-section">
            <div class="section-header">
              <h4>Inventory文件导入</h4>
            </div>
            <el-upload
              ref="fileUpload"
              :auto-upload="false"
              :show-file-list="true"
              accept=".ini,.txt,.hosts"
              class="upload-area"
              :on-change="handleInventoryFileChange"
              :on-remove="handleFileRemove"
            >
              <el-button class="upload-button">
                <i class="fa fa-upload"></i>
                选择Inventory文件
              </el-button>
              <template #tip>
                <div class="upload-tip">支持标准INI格式的Ansible Inventory文件</div>
              </template>
            </el-upload>
          </div>

          <!-- 配置文件导入 -->
          <div v-if="importType === 'config'" class="import-section">
            <div class="section-header">
              <h4>从配置文件导入</h4>
            </div>
            <el-form label-width="100px">
              <el-form-item label="选择配置">
                <el-select v-model="selectedConfigId" placeholder="请选择Ansible配置" class="glass-select">
                  <el-option
                    v-for="config in ansibleConfigs"
                    :key="config.id"
                    :label="config.name"
                    :value="config.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item v-if="selectedConfigId">
                <div class="config-info">
                  <p>将从配置文件路径导入：{{ getConfigPath(selectedConfigId) }}</p>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showImportDialog = false" class="action-glass-button">
              <i class="fa fa-times"></i>
              取消
            </el-button>
            <el-button @click="executeImport" class="action-glass-button import-btn" :loading="importing">
              <i class="fa fa-upload"></i>
              开始导入
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- 智能导出对话框 -->
      <el-dialog
        v-model="showExportDialog"
        title="智能同步Inventory"
        width="700px"
        :modal="true"
        :close-on-click-modal="false"
        custom-class="glass-dialog export-dialog"
      >
        <div class="export-options">
          <el-form :model="exportForm" label-width="120px">
            <el-form-item label="导出模式">
              <div class="export-mode-container">
                <el-radio-group v-model="exportForm.export_mode" class="export-mode-group" style="background: transparent !important; border: none !important; box-shadow: none !important;">
                  <el-radio value="single" class="export-radio">
                    <span class="radio-content">
                      <i class="fa fa-file-o radio-icon"></i>
                      <span class="radio-text">
                        <span class="radio-title">单环境同步</span>
                        <span class="radio-desc">只同步指定环境的主机到配置文件</span>
                      </span>
                    </span>
                  </el-radio>
                  <el-radio value="merged" class="export-radio">
                    <span class="radio-content">
                      <i class="fa fa-files-o radio-icon"></i>
                      <span class="radio-text">
                        <span class="radio-title">合并同步</span>
                        <span class="radio-desc">所有环境合并同步，组名带环境前缀</span>
                      </span>
                    </span>
                  </el-radio>
                  <el-radio value="separate" class="export-radio">
                    <span class="radio-content">
                      <i class="fa fa-folder-o radio-icon"></i>
                      <span class="radio-text">
                        <span class="radio-title">分文件同步</span>
                        <span class="radio-desc">每个环境同步到独立配置文件</span>
                      </span>
                    </span>
                  </el-radio>
                </el-radio-group>
              </div>
            </el-form-item>

            <el-form-item label="配置" required>
              <el-select
                v-if="exportForm.export_mode === 'single'"
                v-model="exportForm.config_id"
                :placeholder="getConfigPlaceholder()"
                class="glass-select"
              >
                <el-option
                  v-for="config in ansibleConfigs"
                  :key="config.id"
                  :label="`${config.name} (${config.inventory_path})`"
                  :value="config.id"
                />
              </el-select>
              <el-select
                v-else
                v-model="exportForm.config_ids"
                :placeholder="getConfigPlaceholder()"
                multiple
                class="glass-select"
                collapse-tags
                collapse-tags-tooltip
              >
                <el-option
                  v-for="config in ansibleConfigs"
                  :key="config.id"
                  :label="`${config.name} (${config.inventory_path})`"
                  :value="config.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item v-if="exportForm.export_mode === 'single'" label="选择环境">
              <el-select v-model="exportForm.inventory_id" placeholder="请选择环境" class="glass-select" :loading="loadingEnvironments">
                <el-option
                  v-for="env in availableEnvironments"
                  :key="env.inventory_id"
                  :label="env.name"
                  :value="env.inventory_id"
                />
              </el-select>
              <div v-if="availableEnvironments.length === 0 && getSelectedConfigId()" class="env-tip">
                该配置下暂无可用环境，请先从CMDB同步数据
              </div>
            </el-form-item>

            <el-form-item v-if="getSelectedConfigId()" label="导出路径">
              <div class="export-path-info">
                <p>{{ getExportPathInfo() }}</p>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showExportDialog = false" class="action-glass-button">
              <i class="fa fa-times"></i>
              取消
            </el-button>
            <el-button @click="executeSmartExport" class="action-glass-button export-btn" :loading="exporting">
              <i class="fa fa-sync"></i>
              开始同步
            </el-button>
          </div>
        </template>
      </el-dialog>

    </div>
  </div>
</template>

<script setup lang="ts">
import { registerAnsibleInventoryLanguage, unregisterAnsibleInventoryLanguage } from '@/utils/ansible-language.js'
import request from '@/utils/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as monaco from 'monaco-editor'
import { nextTick, onMounted, reactive, ref, watch } from 'vue'



// 导入编辑器核心功能
import 'monaco-editor/esm/vs/editor/editor.api'

// 响应式数据
const loading = ref(false)
const syncing = ref(false)
const creating = ref(false)
const importing = ref(false)
const exporting = ref(false)
const showInventoryDetail = ref(false)
const showCreateDialog = ref(false)
const showImportDialog = ref(false)
const showExportDialog = ref(false)
const selectedInventory = ref(null)
const editingInventoryId = ref(null)
const inventories = ref([])
const hosts = ref([])  // 保留用于统计

// 创建表单数据
const createForm = reactive({
  name: '',
  content: '',
  description: '',
  config_id: ''
})

// 导入相关数据
const importType = ref('excel')
const selectedConfigId = ref('')
const ansibleConfigs = ref([])
const excelUpload = ref(null)
const fileUpload = ref(null)
const selectedExcelFile = ref(null)
const selectedInventoryFile = ref(null)

// 导出相关数据
const exportForm = reactive({
  export_mode: 'single',
  config_ids: [] as number[],
  config_id: null as number | null,  // 单选模式使用的字段
  environment: 'prod',
  inventory_id: null as number | null  // 选中的inventory ID
})

const loadingEnvironments = ref(false)
const availableEnvironments = ref([])

// Monaco编辑器相关
const monacoEditor = ref(null)
let editorInstance = null

// 统计数据
const statistics = ref({
  total_hosts: 0,
  total_groups: 0,
  online_rate: 0
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0
})

// 方法
const loadInventories = async () => {
  loading.value = true
  try {
    // 使用request工具并行加载inventories和hosts数据
    const [inventoryResponse, hostResponse] = await Promise.all([
      request({
        url: '/api/ansible/inventories/',
        method: 'get'
      }),
      request({
        url: '/api/hosts/',
        method: 'get'
      })
    ])

    // 从axios响应中提取数据
    const inventoryData = inventoryResponse.data
    const hostData = hostResponse.data

    // 处理inventory数据
    console.log('inventoryData:', inventoryData)
    const inventoryList = inventoryData.results || inventoryData || []
    console.log('inventoryList:', inventoryList)

    // 确保inventories是数组
    if (Array.isArray(inventoryList)) {
      inventories.value = inventoryList
      pagination.total = inventoryData.count || inventoryList.length
    } else {
      console.error('inventoryList不是数组:', inventoryList)
      inventories.value = []
      pagination.total = 0
    }

    // 处理分页数据，获取results数组
    console.log('hostData:', hostData)
    const hostList = hostData.results || hostData || []
    console.log('hostList:', hostList)

    // 确保hostList是数组
    if (Array.isArray(hostList)) {
      // 转换CMDB主机数据用于统计
      hosts.value = hostList.map(host => ({
        id: host.id,
        hostname: host.hostname,
        ip_address: host.public_ip || host.private_ip,
        groups: host.host_group_names || [],
        status: host.status === 'online' ? 'online' : 'offline',
        os_type: host.system_type || '未知',
        last_seen: host.updated_at
      }))
    } else {
      console.error('hostList不是数组:', hostList)
      hosts.value = []
    }

    // 更新统计
    statistics.value.total_hosts = hosts.value.length
    const uniqueGroups = new Set()
    hosts.value.forEach(host => host.groups.forEach(group => uniqueGroups.add(group)))
    statistics.value.total_groups = uniqueGroups.size
    statistics.value.online_rate = hosts.value.length > 0 ? Math.round(
      (hosts.value.filter(host => host.status === 'online').length / hosts.value.length) * 100
    ) : 0
  } catch (error) {
    console.error('加载数据失败:', error)
    ElMessage.error('加载数据异常')
  } finally {
    loading.value = false
  }
}

const refreshInventory = () => {
  loadInventories()
}

const syncHosts = async () => {
  syncing.value = true
  try {
    const response = await request({
      url: '/api/ansible/inventories/sync_from_cmdb/',
      method: 'post'
    })

    const result = response.data
    if (result.status === 'success') {
      ElMessage.success(result.message)
      loadInventories()
    } else {
      ElMessage.error(result.message || '同步失败')
    }
  } catch (error) {
    console.error('主机同步失败:', error)
    ElMessage.error('主机同步异常')
  } finally {
    syncing.value = false
  }
}

const showCreateInventory = () => {
  console.log('创建Inventory按钮被点击')

  // 重置表单
  createForm.name = ''
  createForm.content = ''
  createForm.description = ''
  createForm.config_id = ''
  editingInventoryId.value = null

  // 显示对话框
  showCreateDialog.value = true
  console.log('对话框已设置为显示:', showCreateDialog.value)

  // 加载配置列表
  loadAnsibleConfigs()
}

const createInventory = async () => {
  // 确保从Monaco编辑器获取最新内容
  if (editorInstance) {
    createForm.content = editorInstance.getValue()
    console.log('从Monaco编辑器获取内容:', createForm.content)
  }

  if (!createForm.name.trim()) {
    ElMessage.error('请输入Inventory名称')
    return
  }

  if (!createForm.config_id) {
    ElMessage.error('请选择Ansible配置')
    return
  }

  if (!createForm.content.trim()) {
    ElMessage.error('请输入Inventory内容')
    return
  }

  creating.value = true
  try {
    const token = localStorage.getItem('token')
    const isEditing = editingInventoryId.value !== null
    const url = isEditing
      ? `/api/ansible/inventories/${editingInventoryId.value}/`
      : '/api/ansible/inventories/'
    const method = isEditing ? 'PUT' : 'POST'

    // 获取选择的配置名称
    const selectedConfig = ansibleConfigs.value.find(c => c.id === createForm.config_id)
    const configName = selectedConfig ? selectedConfig.name : 'unknown'

    // 自动添加配置名称到inventory名称中
    const inventoryName = createForm.name.trim().includes(`(${configName})`)
      ? createForm.name.trim()
      : `${createForm.name.trim()}(${configName})`

    const requestData = {
      name: inventoryName,
      content: createForm.content.trim(),
      config: createForm.config_id,  // 后端期望的字段名
      file_path: `/tmp/inventory_${createForm.name.trim()}_${Date.now()}.ini`  // 生成文件路径
    }

    console.log('发送创建请求:', {
      url,
      method,
      data: requestData
    })

    const response = await request({
      url,
      method: method.toLowerCase(),
      data: requestData
    })

    console.log('响应数据:', response.data)

    ElMessage.success(isEditing ? 'Inventory更新成功' : 'Inventory创建成功')
    showCreateDialog.value = false
    editingInventoryId.value = null
    loadInventories()
  } catch (error) {
    console.error('保存Inventory失败:', error)
    ElMessage.error(error.response?.data?.message || error.response?.data?.detail || '保存Inventory异常')
  } finally {
    creating.value = false
  }
}

const showImportDialogFunc = () => {
  // 重置导入状态
  importType.value = 'excel'
  selectedConfigId.value = ''
  selectedExcelFile.value = null
  selectedInventoryFile.value = null
  // 加载Ansible配置列表
  loadAnsibleConfigs()
  showImportDialog.value = true
}

// 文件选择处理函数
const handleExcelFileChange = (file, fileList) => {
  console.log('Excel文件选择:', file, fileList)
  selectedExcelFile.value = file
}

const handleInventoryFileChange = (file, fileList) => {
  console.log('Inventory文件选择:', file, fileList)
  selectedInventoryFile.value = file
}

const handleFileRemove = (file, fileList) => {
  console.log('文件移除:', file, fileList)
  selectedExcelFile.value = null
  selectedInventoryFile.value = null
}

const loadAnsibleConfigs = async () => {
  try {
    const token = localStorage.getItem('token')
    console.log('Loading Ansible configs with token:', token ? 'Token exists' : 'No token')

    const response = await request({
      url: '/api/ansible/configs/',
      method: 'get'
    })

    const data = response.data
    console.log('Ansible configs data:', data)
    ansibleConfigs.value = data.results || data
    console.log('Set ansibleConfigs.value to:', ansibleConfigs.value)
  } catch (error) {
    console.error('加载Ansible配置失败:', error)
    ElMessage.error('加载Ansible配置异常')
  }
}

// 下拉框调试函数
const handleSelectClick = (event) => {
  console.log('下拉框被点击', event)
  console.log('当前配置数量:', ansibleConfigs.value.length)
  console.log('配置数据:', ansibleConfigs.value)

  // 强制触发下拉框打开
  if (ansibleConfigs.value.length > 0) {
    console.log('有数据，尝试强制打开下拉框')
  }
}

const handleSelectFocus = () => {
  console.log('下拉框获得焦点')
  if (ansibleConfigs.value.length === 0) {
    console.log('没有数据，重新加载配置')
    loadAnsibleConfigs()
  }
}

const handleVisibleChange = (visible) => {
  console.log('下拉框可见性变化:', visible)
  if (visible && ansibleConfigs.value.length === 0) {
    console.log('下拉框打开但没有数据，重新加载配置')
    loadAnsibleConfigs()
  }
  if (!visible && ansibleConfigs.value.length > 0) {
    console.log('下拉框关闭，但有数据，可能是CSS问题')
  }
}





const downloadTemplate = async () => {
  try {
    const response = await request({
      url: '/api/ansible/inventories/download_template/',
      method: 'get',
      responseType: 'blob'
    })

    const blob = response.data
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = 'inventory_template.xlsx'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
    document.body.removeChild(a)
    ElMessage.success('模板下载成功')
  } catch (error) {
    console.error('模板下载失败:', error)
    ElMessage.error('模板下载异常')
  }
}

const getConfigPath = (configId) => {
  const config = ansibleConfigs.value.find(c => c.id === configId)
  return config ? config.inventory_path : ''
}

const getSelectedConfigId = () => {
  if (exportForm.export_mode === 'single') {
    return exportForm.config_id
  } else {
    return exportForm.config_ids.length > 0 ? exportForm.config_ids[0] : null
  }
}

const getConfigPlaceholder = () => {
  if (exportForm.export_mode === 'single') {
    return '请选择配置'
  } else if (exportForm.export_mode === 'merged') {
    return '请选择要合并的配置（可多选）'
  } else {
    return '请选择配置（将分文件导出该配置下的所有环境）'
  }
}

const getExportPathInfo = () => {
  const selectedConfigId = getSelectedConfigId()
  if (!selectedConfigId) return ''

  if (exportForm.export_mode === 'single') {
    const config = ansibleConfigs.value.find(c => c.id === selectedConfigId)
    if (!config) return ''
    const basePath = config.inventory_path || '/etc/ansible/hosts'
    const envMap = {
      'dev': '开发环境',
      'test': '测试环境',
      'staging': '预发布环境',
      'prod': '生产环境'
    }
    const envName = envMap[exportForm.environment] || exportForm.environment || '生产环境'
    return `单环境同步 (${envName}): ${basePath}`
  } else if (exportForm.export_mode === 'merged') {
    const configs = ansibleConfigs.value.filter(c => exportForm.config_ids.includes(c.id))
    const paths = configs.map(c => c.inventory_path || '/etc/ansible/hosts').join(', ')
    return `合并同步 (${configs.length}个配置): ${paths}`
  } else if (exportForm.export_mode === 'separate') {
    const config = ansibleConfigs.value.find(c => c.id === selectedConfigId)
    if (!config) return ''
    const basePath = config.inventory_path || '/etc/ansible/hosts'
    return `分文件同步: ${basePath}_dev, ${basePath}_test, ${basePath}_staging, ${basePath}_prod`
  }

  return ''
}

const showSmartExport = () => {
  // 重置表单
  exportForm.export_mode = 'single'
  exportForm.config_ids = []
  exportForm.config_id = null
  exportForm.environment = ''
  exportForm.inventory_id = null

  // 清空环境列表，等待用户选择配置后动态加载
  availableEnvironments.value = []

  // 加载配置列表
  loadAnsibleConfigs()
  showExportDialog.value = true
}

const executeSmartExport = async () => {
  const selectedConfigId = getSelectedConfigId()
  if (!selectedConfigId) {
    ElMessage.error('请选择Ansible配置')
    return
  }

  // 确保config_ids数组包含正确的值
  if (exportForm.export_mode === 'single') {
    exportForm.config_ids = [exportForm.config_id]
  }

  exporting.value = true
  try {
    const response = await request({
      url: '/api/ansible/inventories/smart_export/',
      method: 'post',
      data: exportForm
    })

    const result = response.data
    if (result.status === 'success') {
      ElMessage.success(result.message)
      showExportDialog.value = false
    } else {
      ElMessage.error(result.message || '导出失败')
    }
  } catch (error) {
    console.error('智能导出失败:', error)
    ElMessage.error('智能导出异常')
  } finally {
    exporting.value = false
  }
}

const executeImport = async () => {
  if (importType.value === 'config') {
    await importFromConfig()
  } else {
    await importFromFile()
  }
}

const importFromConfig = async () => {
  if (!selectedConfigId.value) {
    ElMessage.error('请选择Ansible配置')
    return
  }

  importing.value = true
  try {
    const response = await request({
      url: '/api/ansible/inventories/import_from_file/',
      method: 'post',
      data: {
        config_id: selectedConfigId.value
      }
    })

    const result = response.data
    if (result.status === 'success') {
      ElMessage.success(result.message)
      showImportDialog.value = false
      loadInventories()
    } else {
      ElMessage.error(result.message || '导入失败')
    }
  } catch (error) {
    console.error('配置文件导入失败:', error)
    ElMessage.error('配置文件导入异常')
  } finally {
    importing.value = false
  }
}

const importFromFile = async () => {
  // 使用新的文件选择机制
  const selectedFile = importType.value === 'excel' ? selectedExcelFile.value : selectedInventoryFile.value

  console.log('导入类型:', importType.value)
  console.log('选择的文件:', selectedFile)

  if (!selectedFile) {
    ElMessage.error('请选择要上传的文件')
    return
  }

  // 检查文件对象
  const fileToUpload = selectedFile.raw || selectedFile
  console.log('要上传的文件对象:', fileToUpload)

  if (!fileToUpload) {
    ElMessage.error('文件对象无效，请重新选择文件')
    return
  }

  importing.value = true
  try {
    // 获取要使用的配置ID
    let configId = null
    if (ansibleConfigs.value.length > 0) {
      // 优先使用默认配置
      const defaultConfig = ansibleConfigs.value.find(config => config.is_default)
      configId = defaultConfig ? defaultConfig.id : ansibleConfigs.value[0].id
    }

    if (!configId) {
      ElMessage.error('没有可用的Ansible配置，请先创建配置')
      return
    }

    const formData = new FormData()
    formData.append('file', fileToUpload)
    formData.append('import_type', importType.value)
    formData.append('config_id', configId.toString())

    const response = await request({
      url: '/api/ansible/inventories/batch_import/',
      method: 'post',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })

    const result = response.data
    if (result.status === 'success') {
      ElMessage.success(result.message)
      showImportDialog.value = false
      loadInventories()
      // 清空文件选择
      selectedExcelFile.value = null
      selectedInventoryFile.value = null
      // 清空上传列表
      const uploadRef = importType.value === 'excel' ? excelUpload.value : fileUpload.value
      uploadRef?.clearFiles()
    } else {
      ElMessage.error(result.message || '导入失败')
    }
  } catch (error) {
    console.error('文件导入失败:', error)
    ElMessage.error('文件导入异常')
  } finally {
    importing.value = false
  }
}

const exportInventory = async () => {
  try {
    const response = await request({
      url: '/api/ansible/inventories/batch_export/?export_type=excel',
      method: 'get',
      responseType: 'blob'
    })

    const blob = response.data
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = `inventory_export_${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.xlsx`
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
    document.body.removeChild(a)
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出异常')
  }
}

const viewInventoryDetail = async (inventory) => {
  try {
    const response = await request({
      url: `/api/ansible/inventories/${inventory.id}/`,
      method: 'get'
    })

    selectedInventory.value = response.data
    showInventoryDetail.value = true
  } catch (error) {
    console.error('获取Inventory详情失败:', error)
    ElMessage.error('获取Inventory详情异常')
  }
}

const editInventory = async (inventory) => {
  // 获取完整的inventory数据
  try {
    const response = await request({
      url: `/api/ansible/inventories/${inventory.id}/`,
      method: 'get'
    })

    const detailData = response.data
    // 填充编辑表单
    createForm.name = detailData.name
    createForm.content = detailData.content
    createForm.description = detailData.description || ''
    createForm.config_id = detailData.config.id
    // 设置编辑模式
    editingInventoryId.value = inventory.id
    // 加载配置列表
    await loadAnsibleConfigs()
    showCreateDialog.value = true

    // 延迟初始化编辑器并设置内容
    nextTick(() => {
      initMonacoEditor()
      // 确保编辑器内容正确设置
      if (editorInstance && detailData.content) {
        editorInstance.setValue(detailData.content)
      }
    })
  } catch (error) {
    console.error('获取Inventory详情失败:', error)
    ElMessage.error('获取Inventory详情异常')
  }
}

const parseInventory = async (inventory) => {
  try {
    const response = await request({
      url: `/api/ansible/inventories/${inventory.id}/parse_inventory/`,
      method: 'post'
    })

    const result = response.data
    if (result.status === 'success') {
      ElMessage.success('Inventory解析成功')
      console.log('解析结果:', result.data)
    } else {
      ElMessage.error(result.message || '解析失败')
    }
  } catch (error) {
    console.error('解析Inventory失败:', error)
    ElMessage.error('解析Inventory异常')
  }
}

const exportToFile = async (inventory) => {
  try {
    const response = await request({
      url: `/api/ansible/inventories/${inventory.id}/export_to_file/`,
      method: 'post'
    })

    const result = response.data
    if (result.status === 'success') {
      ElMessage.success(result.message)
    } else {
      ElMessage.error(result.message || '导出失败')
    }
  } catch (error) {
    console.error('导出到文件失败:', error)
    ElMessage.error('导出到文件异常')
  }
}

const deleteInventory = async (inventory) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除Inventory "${inventory.name}" 吗？此操作不可恢复。`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'glass-message-box'
      }
    )

    await request({
      url: `/api/ansible/inventories/${inventory.id}/`,
      method: 'delete'
    })

    ElMessage.success(`Inventory "${inventory.name}" 删除成功`)
    loadInventories()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除Inventory失败:', error)
      ElMessage.error('删除Inventory异常')
    }
  }
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  loadInventories()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  loadInventories()
}

const formatTime = (time) => {
  if (!time) return '未知'
  return new Date(time).toLocaleString()
}



// 监听配置变化，动态加载环境
const loadAvailableEnvironments = async (configId: number) => {
  if (!configId) {
    availableEnvironments.value = []
    return
  }

  console.log('开始加载环境列表，配置ID:', configId)
  loadingEnvironments.value = true
  try {
    const response = await request({
      url: `/api/ansible/inventories/get_available_environments/?config_id=${configId}`,
      method: 'get'
    })

    const result = response.data
    console.log('环境API响应数据:', result)

    if (result.status === 'success' && result.data && result.data.environments) {
      availableEnvironments.value = [...result.data.environments]

      // 自动选择第一个环境
      if (availableEnvironments.value.length > 0) {
        exportForm.environment = availableEnvironments.value[0].code
        exportForm.inventory_id = availableEnvironments.value[0].inventory_id
        ElMessage.success(`已加载${availableEnvironments.value.length}个环境，自动选择：${availableEnvironments.value[0].name}`)
      } else {
        exportForm.environment = ''
        exportForm.inventory_id = null
        ElMessage.warning('该配置下没有可用的环境')
      }
    } else {
      console.error('环境API返回数据格式错误:', result)
      availableEnvironments.value = []
      exportForm.environment = ''
      exportForm.inventory_id = null
      ElMessage.error('获取环境列表数据格式错误')
    }
  } catch (error) {
    console.error('加载可用环境失败:', error)
    availableEnvironments.value = []
    exportForm.environment = ''
    exportForm.inventory_id = null
    ElMessage.error('获取环境列表异常，请重试')
  } finally {
    loadingEnvironments.value = false
  }
}

// 初始化Monaco编辑器
const initMonacoEditor = () => {
  if (monacoEditor.value && !editorInstance) {
    try {
      // 注册Ansible Inventory语言
      registerAnsibleInventoryLanguage()

      const defaultContent = createForm.content || `# Ansible Inventory 配置文件
# 这是一个示例配置，展示了如何组织主机和组

# Web服务器组
[webservers]
web1 ansible_host=192.168.1.10 ansible_user=root
web2 ansible_host=192.168.1.11 ansible_user=root
web3 ansible_host=192.168.1.12 ansible_user=root

# 数据库服务器组
[databases]
db1 ansible_host=192.168.1.20 ansible_user=root
db2 ansible_host=192.168.1.21 ansible_user=root

# 负载均衡器组
[loadbalancers]
lb1 ansible_host=192.168.1.30 ansible_user=root

# 监控服务器组
[monitoring]
monitor1 ansible_host=192.168.1.40 ansible_user=root

# 组变量示例
[webservers:vars]
http_port=80
max_clients=200

[databases:vars]
mysql_port=3306
mysql_root_password=secure_password

# 父组示例
[production:children]
webservers
databases
loadbalancers

[staging:children]
webservers
databases

# 全局变量
[all:vars]
ansible_ssh_private_key_file=~/.ssh/id_rsa
ansible_ssh_common_args='-o StrictHostKeyChecking=no'`

      editorInstance = monaco.editor.create(monacoEditor.value, {
        value: defaultContent,
        language: 'ansible-inventory',
        theme: 'ansible-dark',
        automaticLayout: true,
        minimap: { enabled: false },
        scrollBeyondLastLine: false,
        fontSize: 14,
        lineNumbers: 'on',
        wordWrap: 'on',
        // 启用智能提示
        quickSuggestions: {
          other: true,
          comments: false,
          strings: true
        },
        suggestOnTriggerCharacters: true,
        acceptSuggestionOnCommitCharacter: true,
        acceptSuggestionOnEnter: 'on',
        tabCompletion: 'on'
      })



      // 监听内容变化
      editorInstance.onDidChangeModelContent(() => {
        createForm.content = editorInstance.getValue()
      })

      // 确保编辑器获得焦点
      setTimeout(() => {
        if (editorInstance) {
          editorInstance.focus()
        }
      }, 100)
    } catch (error) {
      console.error('Monaco编辑器初始化失败:', error)
    }
  } else if (editorInstance && createForm.content) {
    // 如果编辑器已存在，只更新内容
    editorInstance.setValue(createForm.content)
  }
}

// 销毁编辑器
const destroyMonacoEditor = () => {
  if (editorInstance) {
    editorInstance.dispose()
    editorInstance = null
  }
  // 清理Ansible Inventory语言注册
  unregisterAnsibleInventoryLanguage()
}

// 监听对话框显示状态
watch(showCreateDialog, (newVal) => {
  if (newVal) {
    nextTick(() => {
      initMonacoEditor()
    })
  } else {
    destroyMonacoEditor()
  }
})

onMounted(() => {
  loadInventories()
})

// 监听配置选择变化，自动加载环境
watch(() => getSelectedConfigId(), (newConfigId) => {
  if (exportForm.export_mode === 'single' && newConfigId) {
    loadAvailableEnvironments(newConfigId)
  } else {
    // 没有选择配置或非单环境模式时，清空环境列表
    availableEnvironments.value = []
    exportForm.environment = ''
    exportForm.inventory_id = null
  }
}, { immediate: true })

// 监听导出模式变化
watch(() => exportForm.export_mode, (newMode) => {
  const selectedConfigId = getSelectedConfigId()
  if (newMode === 'single' && selectedConfigId) {
    loadAvailableEnvironments(selectedConfigId)
  } else {
    // 非单环境模式或没有选择配置时，清空环境列表
    availableEnvironments.value = []
    exportForm.environment = ''
    exportForm.inventory_id = null
  }
})
</script>

<style lang="scss" scoped>
/* 复制ansible日志审计的完整样式 */
.ansible-audit-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(20, 20, 40, 0.95) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  overflow-x: hidden;
}

.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stars, .stars2, .stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.stars {
  background-image:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent);
  background-repeat: repeat;
  background-size: 200px 100px;
  animation: zoom 20s infinite linear;
}

.stars2 {
  background-image:
    radial-gradient(1px 1px at 40px 60px, #fff, transparent),
    radial-gradient(1px 1px at 120px 10px, rgba(255,255,255,0.7), transparent);
  background-repeat: repeat;
  background-size: 300px 200px;
  animation: zoom 40s infinite linear;
}

.stars3 {
  background-image:
    radial-gradient(1px 1px at 10px 10px, rgba(255,255,255,0.5), transparent);
  background-repeat: repeat;
  background-size: 400px 300px;
  animation: zoom 60s infinite linear;
}

@keyframes zoom {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

.audit-content {
  position: relative;
  z-index: 10;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.glass-effect {
  background: rgba(164, 244, 186, 0.1);
  border: 1px solid rgba(164, 244, 186, 0.2);
  border-radius: 12px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.page-header {
  margin-bottom: 30px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.title-section {
  flex: 1;
}

.page-title {
  color: #00eaff;
  font-size: 2.5em;
  margin: 0 0 10px 0;
  text-shadow: 0 0 20px rgba(0, 234, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 15px;

  i {
    font-size: 0.8em;
  }
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1em;
  margin: 0;
}

.stats-section {
  display: flex;
  gap: 20px;
}

.stat-card {
  padding: 20px;
  text-align: center;
  min-width: 120px;

  .stat-number {
    color: #00eaff;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  }

  .stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    margin-top: 5px;
  }
}

.search-filters {
  margin-bottom: 30px;
  padding: 20px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 15px;
}

.audit-table-section {
  margin-bottom: 30px;
  padding: 30px;
}

.section-title {
  color: #00eaff;
  font-size: 1.3em;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.config-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);

  i {
    color: #00eaff;
  }
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}



/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.action-glass-button {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(164, 244, 186, 0.2) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(164, 244, 186, 0.3) !important;
  }

  i {
    margin-right: 4px !important;
  }

  &.danger {
    background: rgba(255, 107, 107, 0.1) !important;
    border-color: rgba(255, 107, 107, 0.3) !important;
    color: rgba(255, 107, 107, 0.9) !important;

    &:hover {
      background: rgba(255, 107, 107, 0.2) !important;
      border-color: rgba(255, 107, 107, 0.5) !important;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
    }

    &:disabled {
      background: rgba(164, 164, 164, 0.1) !important;
      border-color: rgba(164, 164, 164, 0.2) !important;
      color: rgba(164, 164, 164, 0.5) !important;
      cursor: not-allowed !important;

      &:hover {
        transform: none !important;
        box-shadow: none !important;
      }
    }
  }
}

/* 确认对话框样式 */
:deep(.glass-message-box) {
  .el-message-box {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  .el-message-box__header {
    background: rgba(164, 244, 186, 0.05) !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .el-message-box__title {
    color: #00eaff !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(0, 234, 255, 0.3) !important;
  }

  .el-message-box__content {
    background: rgba(164, 244, 186, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .el-message-box__btns {
    background: rgba(164, 244, 186, 0.05) !important;
    border-top: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 0 0 12px 12px !important;

    .el-button {
      background: rgba(164, 244, 186, 0.1) !important;
      border: 1px solid rgba(164, 244, 186, 0.3) !important;
      color: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(10px) !important;

      &:hover {
        background: rgba(164, 244, 186, 0.2) !important;
        border-color: rgba(164, 244, 186, 0.5) !important;
        color: #ffffff !important;
      }

      &.el-button--primary {
        background: rgba(255, 107, 107, 0.2) !important;
        border-color: rgba(255, 107, 107, 0.4) !important;
        color: #ffffff !important;

        &:hover {
          background: rgba(255, 107, 107, 0.3) !important;
          border-color: rgba(255, 107, 107, 0.6) !important;
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .header-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .stats-section {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-section {
    flex-direction: column;
    gap: 15px;
  }
}

/* 工具栏按钮多彩样式 */
.refresh-btn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #22c55e !important;

  &:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.2)) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3) !important;
  }
}

.sync-btn {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: #3b82f6 !important;

  &:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.2)) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
  }
}

.create-btn {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1)) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #a855f7 !important;

  &:hover {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.2)) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3) !important;
  }
}

.import-btn {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1)) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #f59e0b !important;

  &:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.2)) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3) !important;
  }
}

.export-btn {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1)) !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
  color: #ec4899 !important;

  &:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(236, 72, 153, 0.2)) !important;
    border-color: rgba(236, 72, 153, 0.5) !important;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3) !important;
  }
}

.smart-export-btn {
  background: linear-gradient(135deg, rgba(156, 136, 255, 0.2), rgba(156, 136, 255, 0.1)) !important;
  border-color: rgba(156, 136, 255, 0.3) !important;
  color: #9c88ff !important;

  &:hover {
    background: linear-gradient(135deg, rgba(156, 136, 255, 0.3), rgba(156, 136, 255, 0.2)) !important;
    border-color: rgba(156, 136, 255, 0.5) !important;
    box-shadow: 0 0 15px rgba(156, 136, 255, 0.3) !important;
  }
}

/* 表格操作按钮样式 */
.table-action-button {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(10px) !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
  min-width: 60px !important;
  font-size: 12px !important;
  transition: all 0.3s ease !important;

  &:hover {
    backdrop-filter: blur(15px) !important;
    transform: translateY(-1px) !important;
  }
}

.view-btn {
  color: #06b6d4 !important;
  border-color: rgba(6, 182, 212, 0.3) !important;

  &:hover {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.3) !important;
  }
}

.edit-btn {
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.3) !important;

  &:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
  }
}

.parse-btn {
  color: #8b5cf6 !important;
  border-color: rgba(139, 92, 246, 0.3) !important;

  &:hover {
    background: rgba(139, 92, 246, 0.2) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;
  }
}

.delete-btn {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;

  &:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
  }

  &:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
  }
}

/* 详情对话框样式 */
.inventory-detail {
  .detail-section {
    margin-bottom: 25px;

    .detail-title {
      color: #00eaff;
      font-size: 1.2em;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 8px;

      i {
        font-size: 1.1em;
      }
    }

    .detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;

      .detail-item {
        display: flex;
        align-items: center;
        gap: 10px;

        label {
          color: rgba(255, 255, 255, 0.8);
          font-weight: 500;
          min-width: 80px;
        }

        span {
          color: #a4f4ba;
          flex: 1;
        }
      }
    }
  }

  .inventory-content {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(164, 244, 186, 0.2);
    border-radius: 8px;
    padding: 15px;
    max-height: 300px;
    overflow-y: auto;

    pre {
      color: #a4f4ba;
      font-family: 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.4;
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}

:deep(.glass-dialog) {
  .el-dialog {
    background: rgba(164, 244, 186, 0.08) !important;
    border: 1px solid rgba(164, 244, 186, 0.25) !important;
    border-radius: 15px !important;
    backdrop-filter: blur(25px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
  }

  .el-dialog__header {
    background: rgba(164, 244, 186, 0.05) !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 15px 15px 0 0 !important;
    padding: 20px 24px !important;

    .el-dialog__title {
      color: #00eaff !important;
      font-size: 1.4em !important;
      font-weight: 600 !important;
      text-shadow: 0 0 15px rgba(0, 234, 255, 0.4) !important;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 18px !important;

        &:hover {
          color: #ff6b6b !important;
          text-shadow: 0 0 10px rgba(255, 107, 107, 0.5) !important;
        }
      }
    }
  }

  .el-dialog__body {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 24px !important;
  }

  .el-dialog__footer {
    background: rgba(164, 244, 186, 0.05) !important;
    border-top: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 0 0 15px 15px !important;
    padding: 20px 24px !important;
  }
}

/* 创建表单样式 */
.create-form {
  .el-form-item__label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
  }
}

:deep(.glass-input) {
  .el-input__wrapper {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: none !important;

    &:hover {
      border-color: rgba(164, 244, 186, 0.4) !important;
    }

    &.is-focus {
      border-color: rgba(0, 234, 255, 0.5) !important;
      box-shadow: 0 0 10px rgba(0, 234, 255, 0.2) !important;
    }
  }

  .el-input__inner {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;

    &::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }
}

:deep(.glass-textarea) {
  .el-textarea__inner {
    background: rgba(164, 244, 186, 0.1) !important;
    border: 1px solid rgba(164, 244, 186, 0.2) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(10px) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.4 !important;

    &:hover {
      border-color: rgba(164, 244, 186, 0.4) !important;
    }

    &:focus {
      border-color: rgba(0, 234, 255, 0.5) !important;
      box-shadow: 0 0 10px rgba(0, 234, 255, 0.2) !important;
    }

    &::placeholder {
      color: rgba(255, 255, 255, 0.5) !important;
    }
  }
}

/* 导入对话框样式 */
.import-options {
  .import-type-group {
    margin-bottom: 25px;
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;

    .import-radio {
      background: rgba(164, 244, 186, 0.08) !important;
      border: 1px solid rgba(164, 244, 186, 0.25) !important;
      border-radius: 10px !important;
      padding: 18px 8px !important;
      flex: 1;
      min-width: 0;
      max-width: 33.333%;
      text-align: center !important;
      transition: all 0.3s ease !important;
      backdrop-filter: blur(15px) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      cursor: pointer !important;

      &:hover {
        background: rgba(164, 244, 186, 0.15) !important;
        border-color: rgba(164, 244, 186, 0.4) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(164, 244, 186, 0.2) !important;
      }

      :deep(.el-radio) {
        width: 100% !important;
        margin: 0 !important;

        .el-radio__input {
          display: none !important;
        }

        .el-radio__label {
          color: rgba(255, 255, 255, 0.9) !important;
          font-weight: 500 !important;
          font-size: 13px !important;
          padding: 0 !important;
          width: 100% !important;
          line-height: 1.3 !important;

          i {
            display: block !important;
            font-size: 28px !important;
            margin-bottom: 10px !important;
            color: #00eaff !important;
            text-shadow: 0 0 10px rgba(0, 234, 255, 0.3) !important;
          }
        }
      }

      :deep(.el-radio__input.is-checked) + .el-radio__label {
        color: #00eaff !important;
        text-shadow: 0 0 8px rgba(0, 234, 255, 0.4) !important;
      }

      &:has(.el-radio__input.is-checked) {
        background: rgba(0, 234, 255, 0.12) !important;
        border-color: rgba(0, 234, 255, 0.4) !important;
        box-shadow: 0 0 20px rgba(0, 234, 255, 0.2) !important;
      }
    }
  }

  .import-section {
    margin-top: 25px;
    background: rgba(164, 244, 186, 0.05) !important;
    border: 1px solid rgba(164, 244, 186, 0.15) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    backdrop-filter: blur(10px) !important;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding: 0 4px 12px 4px;
      border-bottom: 1px solid rgba(164, 244, 186, 0.2);

      h4 {
        color: #00eaff !important;
        margin: 0 !important;
        font-size: 1.2em !important;
        font-weight: 600 !important;
        text-shadow: 0 0 10px rgba(0, 234, 255, 0.3) !important;
        padding-left: 8px !important;
      }
    }

    .upload-area {
      border: 2px dashed rgba(164, 244, 186, 0.4) !important;
      border-radius: 10px !important;
      padding: 25px !important;
      text-align: center !important;
      background: rgba(164, 244, 186, 0.08) !important;
      backdrop-filter: blur(15px) !important;
      transition: all 0.3s ease !important;

      &:hover {
        border-color: rgba(0, 234, 255, 0.5) !important;
        background: rgba(0, 234, 255, 0.08) !important;
        box-shadow: 0 0 20px rgba(0, 234, 255, 0.15) !important;
      }

      .upload-button {
        background: rgba(164, 244, 186, 0.15) !important;
        border: 1px solid rgba(164, 244, 186, 0.4) !important;
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        backdrop-filter: blur(10px) !important;
        transition: all 0.3s ease !important;

        &:hover {
          background: rgba(0, 234, 255, 0.2) !important;
          border-color: rgba(0, 234, 255, 0.5) !important;
          color: #ffffff !important;
          transform: translateY(-2px) !important;
          box-shadow: 0 4px 15px rgba(0, 234, 255, 0.2) !important;
        }

        i {
          margin-right: 8px !important;
          font-size: 16px !important;
        }
      }

      .upload-tip {
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 13px !important;
        margin-top: 15px !important;
        line-height: 1.4 !important;
      }
    }

    .config-info {
      background: rgba(164, 244, 186, 0.12) !important;
      border: 1px solid rgba(164, 244, 186, 0.25) !important;
      border-radius: 8px !important;
      padding: 18px !important;
      backdrop-filter: blur(10px) !important;
      margin-top: 15px !important;

      p {
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
      }
    }
  }
}

/* 表单样式优化 */
:deep(.import-section) {
  .el-form {
    .el-form-item {
      margin-bottom: 20px !important;

      .el-form-item__label {
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
      }

      .el-form-item__content {
        line-height: 1.5 !important;
      }
    }
  }
}

:deep(.glass-select) {
  .el-select__wrapper {
    background: rgba(164, 244, 186, 0.12) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;

    &:hover {
      border-color: rgba(164, 244, 186, 0.5) !important;
      background: rgba(164, 244, 186, 0.15) !important;
      box-shadow: 0 4px 12px rgba(164, 244, 186, 0.15) !important;
    }

    &.is-focused {
      border-color: rgba(0, 234, 255, 0.6) !important;
      background: rgba(0, 234, 255, 0.08) !important;
      box-shadow: 0 0 15px rgba(0, 234, 255, 0.25) !important;
    }
  }

  .el-select__selected-item {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
  }

  .el-select__placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
  }

  .el-select__caret {
    color: rgba(255, 255, 255, 0.7) !important;
  }
}

/* 上传组件样式优化 */
:deep(.upload-area) {
  .el-upload {
    width: 100% !important;
  }

  .el-upload-list {
    margin-top: 15px !important;

    .el-upload-list__item {
      background: rgba(164, 244, 186, 0.1) !important;
      border: 1px solid rgba(164, 244, 186, 0.2) !important;
      border-radius: 6px !important;
      color: rgba(255, 255, 255, 0.9) !important;
      backdrop-filter: blur(10px) !important;

      &:hover {
        background: rgba(164, 244, 186, 0.15) !important;
      }

      .el-upload-list__item-name {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      .el-icon {
        color: rgba(255, 255, 255, 0.7) !important;
      }
    }
  }
}

/* 全局对话框遮罩优化 */
:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px) !important;
}

/* 确保所有对话框都使用透明玻璃效果 */
:deep(.el-dialog) {
  background: rgba(164, 244, 186, 0.08) !important;
  border: 1px solid rgba(164, 244, 186, 0.25) !important;
  border-radius: 15px !important;
  backdrop-filter: blur(25px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

:deep(.el-dialog__header) {
  background: rgba(164, 244, 186, 0.05) !important;
  border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 15px 15px 0 0 !important;
  padding: 20px 24px !important;
}

:deep(.el-dialog__body) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 24px !important;
}

:deep(.el-dialog__footer) {
  background: rgba(164, 244, 186, 0.05) !important;
  border-top: 1px solid rgba(164, 244, 186, 0.2) !important;
  border-radius: 0 0 15px 15px !important;
  padding: 20px 24px !important;
}

:deep(.el-dialog__title) {
  color: #00eaff !important;
  font-size: 1.4em !important;
  font-weight: 600 !important;
  text-shadow: 0 0 15px rgba(0, 234, 255, 0.4) !important;
}

/* 全屏对话框样式 */
.fullscreen-dialog {
  .el-dialog {
    height: 96vh !important;
    max-height: 96vh !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .el-dialog__body {
    flex: 1 !important;
    padding: 20px 24px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .create-form {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;

    .el-form {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .el-form-item:last-child {
      flex: 1 !important;
      display: flex !important;
      flex-direction: column !important;

      .el-form-item__content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
      }
    }
  }
}

/* 导出对话框样式 */
.export-dialog {
  .el-dialog {
    height: 700px !important;
    max-height: 80vh !important;
  }

  .el-dialog__body {
    height: 500px !important;
    padding: 30px 24px !important;
  }
}

.export-options {
  padding: 20px 0;
  background: transparent !important;
}

.export-mode-container {
  width: 100%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.export-mode-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  background: transparent !important;
}

.export-radio {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 80px !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 8px !important;
  background: rgba(164, 244, 186, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;

  &:hover {
    border-color: rgba(164, 244, 186, 0.5) !important;
    background: rgba(164, 244, 186, 0.1) !important;
    box-shadow: 0 2px 8px rgba(164, 244, 186, 0.2) !important;
  }

  &.is-checked {
    border-color: rgba(164, 244, 186, 0.8) !important;
    background: rgba(164, 244, 186, 0.15) !important;
    box-shadow: 0 0 15px rgba(164, 244, 186, 0.3) !important;
  }

  .el-radio__input {
    margin: 0 0 0 20px !important;
    flex-shrink: 0 !important;
  }

  .el-radio__label {
    width: 100% !important;
    padding: 20px 20px 20px 15px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 60px !important;
  }
}

.radio-content {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.radio-icon {
  font-size: 20px !important;
  color: rgba(164, 244, 186, 0.8) !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  text-align: center !important;
}

.radio-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
  justify-content: center !important;
}

.radio-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.radio-desc {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.export-path-info {
  padding: 12px 16px !important;
  background: rgba(164, 244, 186, 0.05) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(10px) !important;

  p {
    margin: 0 !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.4 !important;
  }
}

/* 修复Element Plus深蓝色背景问题 */
:deep(.export-dialog) {
  /* 移除所有深蓝色背景 */
  .el-form-item__content {
    background: transparent !important;
  }

  .el-radio-group {
    background: transparent !important;

    &.export-mode-group {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
  }
}

/* 强制删除深蓝色容器 */
.export-mode-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.export-mode-container) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.export-mode-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.export-mode-group) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-radio-group) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

:deep(.el-radio-group.export-mode-group) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  &[role="radiogroup"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    .el-radio {
      background: transparent !important;

      .el-radio__input.is-checked {
        .el-radio__inner {
          background: #a4f4ba !important;
          border-color: #a4f4ba !important;
        }

        .el-radio__inner::after {
          background: rgba(0, 0, 0, 0.8) !important;
        }
      }

      .el-radio__inner {
        background: rgba(164, 244, 186, 0.1) !important;
        border-color: rgba(164, 244, 186, 0.4) !important;
      }
    }
  }

  .el-select {
    .el-input__wrapper {
      background: rgba(164, 244, 186, 0.05) !important;
      border: 1px solid rgba(164, 244, 186, 0.3) !important;
      box-shadow: none !important;
    }

    .el-input__inner {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.9) !important;
    }
  }

  .el-select-dropdown {
    background: rgba(164, 244, 186, 0.08) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    backdrop-filter: blur(15px) !important;
  }

  .el-select-dropdown__item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;

    &:hover {
      background: rgba(164, 244, 186, 0.15) !important;
    }

    &.selected {
      background: rgba(164, 244, 186, 0.2) !important;
      color: #a4f4ba !important;
    }
  }
}

/* Monaco编辑器样式 */
.editor-container {
  border: 1px solid rgba(164, 244, 186, 0.3);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(164, 244, 186, 0.05);
  backdrop-filter: blur(10px);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  height: 600px;

  .monaco-editor {
    flex: 1;
    width: 100%;
    min-height: 600px;
    height: 600px;
  }
}

/* 创建Inventory对话框样式 */
:deep(.inventory-create-dialog) {
  .el-dialog {
    margin: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .el-dialog__header {
    padding: 20px 24px 10px !important;
    background: rgba(164, 244, 186, 0.1) !important;
    border-bottom: 1px solid rgba(164, 244, 186, 0.2) !important;
  }

  .el-dialog__body {
    padding: 20px 24px !important;
    height: calc(100vh - 140px) !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
  }

  .el-dialog__footer {
    padding: 10px 24px 20px !important;
    background: rgba(164, 244, 186, 0.05) !important;
    border-top: 1px solid rgba(164, 244, 186, 0.2) !important;
  }

  .create-form {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;

    .el-form-item {
      margin-bottom: 20px !important;

      &:last-child {
        margin-bottom: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
      }
    }

    .el-form-item__label {
      color: rgba(164, 244, 186, 0.9) !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
      min-width: 80px !important;
    }

    .el-form-item__content {
      flex: 1 !important;
    }
  }
}

/* 确保对话框在最顶层，但下拉框更高 */
:deep(.el-overlay) {
  z-index: 3000 !important;
}

:deep(.el-dialog__wrapper) {
  z-index: 3001 !important;
}

/* 全局下拉框z-index修复 */
:global(.el-select-dropdown) {
  z-index: 99999 !important;
}

:global(.el-popper) {
  z-index: 99999 !important;
}

/* 修复下拉框问题 - 提高z-index优先级 */
:deep(.el-select-dropdown) {
  z-index: 99999 !important;
  background: rgba(164, 244, 186, 0.08) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

:deep(.el-select-dropdown__item) {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 8px 12px !important;

  &:hover {
    background: rgba(164, 244, 186, 0.15) !important;
    color: #ffffff !important;
  }

  &.is-selected {
    background: rgba(164, 244, 186, 0.2) !important;
    color: #ffffff !important;
    font-weight: bold !important;
  }
}

/* 确保下拉框可以正常工作 */
:deep(.el-select) {
  .el-select__wrapper {
    cursor: pointer !important;
  }

  .el-select__caret {
    cursor: pointer !important;
  }
}

/* 下拉框定位修复 */
:deep(.el-popper) {
  z-index: 99999 !important;
}

/* 对话框内下拉框修复 */
:deep(.el-dialog) {
  overflow: visible !important;

  .el-select {
    overflow: visible !important;
  }

  .el-form-item {
    overflow: visible !important;
  }

  .el-dialog__body {
    overflow: visible !important;
  }
}

/* 确保全屏对话框内的下拉框也能正常工作 */
:deep(.inventory-create-dialog) {
  .el-dialog {
    overflow: visible !important;
  }

  .el-dialog__body {
    overflow: visible !important;
  }

  .el-form {
    overflow: visible !important;
  }

  .el-form-item {
    overflow: visible !important;
  }

  .el-select {
    overflow: visible !important;
  }
}

/* 自定义下拉框样式 */
.custom-select-dropdown {
  z-index: 99999 !important;
  background: rgba(164, 244, 186, 0.08) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;

  .el-select-dropdown__item {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 12px !important;

    &:hover {
      background: rgba(164, 244, 186, 0.15) !important;
      color: #ffffff !important;
    }

    &.is-selected {
      background: rgba(164, 244, 186, 0.2) !important;
      color: #ffffff !important;
      font-weight: bold !important;
    }
  }
}

/* 操作按钮容器 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
}

/* 操作按钮样式 - 带漂亮颜色 */
.action-glass-button {
  background: rgba(164, 244, 186, 0.1) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  transition: all 0.3s ease !important;
  min-width: 65px !important;

  &:hover {
    background: rgba(164, 244, 186, 0.2) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(164, 244, 186, 0.3) !important;
  }

  i {
    margin-right: 4px !important;
  }

  /* 编辑按钮 - 蓝色 */
  &.edit-action {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    }
  }

  /* 解析按钮 - 紫色 */
  &.parse-action {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 12px rgba(138, 43, 226, 0.4) !important;
    }
  }

  /* 导出按钮 - 橙色 */
  &.export-action {
    background: rgba(255, 165, 0, 0.2) !important;
    border-color: rgba(255, 165, 0, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(255, 165, 0, 0.3) !important;
      border-color: rgba(255, 165, 0, 0.6) !important;
      box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4) !important;
    }
  }

  /* 删除按钮 - 红色 */
  &.danger {
    background: rgba(255, 107, 107, 0.2) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(255, 107, 107, 0.3) !important;
      border-color: rgba(255, 107, 107, 0.6) !important;
      color: #ffffff !important;
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4) !important;
    }
  }
}

/* 工具栏按钮样式 - 照抄Ansible配置页面 */
.glass-button {
  background: rgba(164, 244, 186, 0.15) !important;
  border: 1px solid rgba(164, 244, 186, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

  &:hover {
    background: rgba(164, 244, 186, 0.25) !important;
    border-color: rgba(164, 244, 186, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(164, 244, 186, 0.2) !important;
  }

  i {
    margin-right: 6px !important;
    color: #00eaff !important;
  }

  /* 刷新按钮 - 紫色 */
  &.refresh-button {
    background: rgba(138, 43, 226, 0.2) !important;
    border-color: rgba(138, 43, 226, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(138, 43, 226, 0.3) !important;
      border-color: rgba(138, 43, 226, 0.6) !important;
      box-shadow: 0 4px 16px rgba(138, 43, 226, 0.3) !important;
    }

    i {
      color: #8a2be2 !important;
    }
  }

  /* 同步按钮 - 蓝色 */
  &.sync-button {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(59, 130, 246, 0.3) !important;
      border-color: rgba(59, 130, 246, 0.6) !important;
      box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3) !important;
    }

    i {
      color: #3b82f6 !important;
    }
  }

  /* 添加按钮 - 绿色 */
  &.add-button {
    background: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(34, 197, 94, 0.3) !important;
      border-color: rgba(34, 197, 94, 0.6) !important;
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    }

    i {
      color: #22c55e !important;
    }
  }

  /* 导入按钮 - 青色 */
  &.import-button {
    background: rgba(6, 182, 212, 0.2) !important;
    border-color: rgba(6, 182, 212, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(6, 182, 212, 0.3) !important;
      border-color: rgba(6, 182, 212, 0.6) !important;
      box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3) !important;
    }

    i {
      color: #06b6d4 !important;
    }
  }

  /* 导出按钮 - 橙色 */
  &.export-button {
    background: rgba(255, 165, 0, 0.2) !important;
    border-color: rgba(255, 165, 0, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(255, 165, 0, 0.3) !important;
      border-color: rgba(255, 165, 0, 0.6) !important;
      box-shadow: 0 4px 16px rgba(255, 165, 0, 0.3) !important;
    }

    i {
      color: #ffa500 !important;
    }
  }

  /* 智能同步按钮 - 粉色 */
  &.smart-button {
    background: rgba(236, 72, 153, 0.2) !important;
    border-color: rgba(236, 72, 153, 0.4) !important;
    color: #ffffff !important;

    &:hover {
      background: rgba(236, 72, 153, 0.3) !important;
      border-color: rgba(236, 72, 153, 0.6) !important;
      box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3) !important;
    }

    i {
      color: #ec4899 !important;
    }
  }
}

/* Monaco编辑器智能提示样式优化 */
:deep(.monaco-editor) {
  /* 确保语法高亮不被覆盖 */
  .mtk1 { color: #D4D4D4 !important; }
  .mtk2 { color: #6A9955 !important; font-style: italic !important; }
  .mtk3 { color: #00D7FF !important; font-weight: bold !important; }
  .mtk4 { color: #4FC1FF !important; font-weight: bold !important; }
  .mtk5 { color: #FFD700 !important; }
  .mtk6 { color: #FFFFFF !important; }
  .mtk7 { color: #FFA500 !important; }
  .mtk8 { color: #00FF7F !important; }
  .mtk9 { color: #87CEEB !important; }

  /* 智能提示弹窗样式 */
  .suggest-widget {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  .suggest-widget .monaco-list .monaco-list-row {
    background: transparent !important;
    border-radius: 4px !important;
    margin: 2px 4px !important;

    &:hover {
      background: rgba(164, 244, 186, 0.1) !important;
    }

    &.focused {
      background: rgba(164, 244, 186, 0.2) !important;
    }
  }

  .suggest-widget .monaco-list .monaco-list-row .suggest-icon {
    color: #4FC1FF !important;
  }

  .suggest-widget .monaco-list .monaco-list-row .monaco-highlighted-label {
    color: #A4F4BA !important;

    .highlight {
      background: transparent !important;
      color: #00D7FF !important;
      font-weight: bold !important;
    }
  }

  /* 移除智能提示中的深蓝色包裹 */
  .suggest-widget .monaco-list .monaco-list-row .codicon {
    color: #4FC1FF !important;
  }

  .suggest-widget .monaco-list .monaco-list-row .suggest-label {
    color: #A4F4BA !important;
    background: transparent !important;
  }

  .suggest-widget .monaco-list .monaco-list-row .suggest-label .monaco-highlighted-label .highlight {
    background: transparent !important;
    color: #00D7FF !important;
    font-weight: bold !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  .suggest-widget .monaco-list .monaco-list-row .suggest-detail {
    color: #87CEEB !important;
    font-size: 12px !important;
  }

  .suggest-widget .monaco-list .monaco-list-row .suggest-documentation {
    color: #D4D4D4 !important;
    background: rgba(164, 244, 186, 0.05) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    margin-top: 4px !important;
  }

  /* 参数提示样式 */
  .parameter-hints-widget {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;
    color: #A4F4BA !important;
  }

  /* 悬停提示样式 */
  .monaco-hover {
    background: rgba(30, 30, 30, 0.95) !important;
    border: 1px solid rgba(164, 244, 186, 0.3) !important;
    border-radius: 8px !important;
    backdrop-filter: blur(10px) !important;

    .monaco-hover-content {
      color: #A4F4BA !important;
    }
  }
}

/* 修复消息气泡被编辑器遮挡的问题 */
:deep(.el-message) {
  z-index: 9999 !important;
}

:deep(.el-notification) {
  z-index: 9999 !important;
}

/* 确保对话框层级正确 */
:deep(.inventory-create-dialog) {
  z-index: 3000 !important;

  .monaco-editor {
    z-index: 1 !important;
  }
}


</style>
